<template>
  <div class="user-management">
    <div class="user-management-query">
      <!-- 查询条件参数 -->
      <mu-sub-header>条件查询</mu-sub-header>
      <mu-flex align-items="center" class="form-line">
        <span class="form-line-item">用户名：</span>
        <mu-radio v-model="form.use_username" class="form-line-item" value="off" label="关闭"></mu-radio>
        <mu-radio v-model="form.use_username" class="form-line-item" value="on" label="启用"></mu-radio>
        <mu-text-field v-if="form.use_username === 'on'" v-model="form.username" placeholder="请在这里输入用户名"></mu-text-field>
      </mu-flex>
      <mu-flex align-items="center" class="form-line">
        <span class="form-line-item">真实姓名：</span>
        <mu-radio v-model="form.use_realname" class="form-line-item" value="off" label="关闭"></mu-radio>
        <mu-radio v-model="form.use_realname" class="form-line-item" value="on" label="启用"></mu-radio>
        <mu-text-field v-if="form.use_realname === 'on'" v-model="form.realname" placeholder="请在这里输入真实姓名"></mu-text-field>
      </mu-flex>
      <mu-flex align-items="center" class="form-line">
        <span class="form-line-item">用户权限：</span>
        <mu-radio v-model="form.role" class="form-line-item" :value="-1" label="不限"></mu-radio>
        <mu-radio v-model="form.role" class="form-line-item" :value="0" label="无所属"></mu-radio>
        <mu-radio v-for="item in roles" :key="item.id" v-model="form.role" class="form-line-item" :value="item.id" :label="item.text"></mu-radio>
      </mu-flex>
      <mu-flex align-items="center" class="form-line">
        <span class="form-line-item">是否是超级管理员：</span>
        <mu-radio v-model="form.is_superadmin" class="form-line-item" value="all" label="不限"></mu-radio>
        <mu-radio v-model="form.is_superadmin" class="form-line-item" value="yes" label="是"></mu-radio>
        <mu-radio v-model="form.is_superadmin" class="form-line-item" value="no" label="否"></mu-radio>
      </mu-flex>
      <mu-flex align-items="center" class="form-line">
        <span class="form-line-item">是否可用：</span>
        <mu-radio v-model="form.is_active" class="form-line-item" value="all" label="不限"></mu-radio>
        <mu-radio v-model="form.is_active" class="form-line-item" value="yes" label="是"></mu-radio>
        <mu-radio v-model="form.is_active" class="form-line-item" value="no" label="否"></mu-radio>
      </mu-flex>
      <mu-button color="primary" @click="refresh()">查询</mu-button>
    </div>

    <!-- 用户列表 -->
    <mu-divider />
    <user-page ref="userPage" :fetcher="fetchUsers"></user-page>

    <!-- 批量导入 -->
    <mu-divider />
    <user-import />

    <!-- 单个用户添加 -->
    <mu-divider />
    <user-create @refresh="refresh()" />
  </div>
</template>

<script>
import api from '@/api'
import { mapGetters } from 'vuex'
import UserPage from './UserPage'
import UserImport from './UserImport'
import UserCreate from './UserCreate'

export default {
  name: 'UserManagement',
  components: {
    UserPage,
    UserImport,
    UserCreate
  },
  data() {
    return {
      form: {
        use_username: 'off',
        username: '',
        use_realname: 'off',
        realname: '',
        role: -1,
        is_superadmin: 'all',
        is_active: 'all'
      }
    }
  },
  computed: {
    ...mapGetters({
      roles: 'roles'
    }),
    queryUsername() {
      return this.form.use_username === 'on' ? this.form.username : null
    },
    queryRealname() {
      return this.form.use_realname === 'on' ? this.form.realname : null
    },
    queryIsSuperadmin() {
      const map = {
        all: null,
        yes: 1,
        no: 0
      }
      return map[this.form.is_superadmin]
    },
    queryIsActive() {
      const map = {
        all: null,
        yes: 1,
        no: 0
      }
      return map[this.form.is_active]
    },
    query() {
      return {
        username: this.queryUsername,
        realname: this.queryRealname,
        role: this.form.role >= 0 ? this.form.role : null,
        is_superadmin: this.queryIsSuperadmin,
        is_active: this.queryIsActive
      }
    }
  },
  methods: {
    fetchUsers(page) {
      return api.queryUsers(this.query, page)
    },
    refresh() {
      this.$refs.userPage.refresh()
    }
  }
}
</script>

<style scoped>
.user-management {
  padding: 16px;
}
.form-line {
  padding-bottom: 8px;
}
.form-line-item {
  margin-right: 16px;
}
.user-management-query {
  overflow: hidden;
}
</style>
